<template>
  <!--代理商首页-->
  <div class="my">
    <div class="header">
      <p><img src="../../assets/userhead.png" alt="" width="53">{{agent.userName}}</p>
    </div>
    <div class="divider"></div>
    <wv-panel class="mylist">
      <wv-cell v-for="category in categoryList" :title="category.categoryName" is-link :to="category.agentUrl"
               :key="category.categoryId">
        <img :src="category.categoryIcon | imgPathFilter" alt="" slot="icon" class="cell-icon" width="25">
      </wv-cell>
      <wv-cell title="我的订单" is-link to="/order">
        <img src="../../assets/order.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <wv-cell title="我的钱包" is-link to="/mywallet">
        <img src="../../assets/wallet.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <wv-cell title="余额充值" is-link to="/recharge">
        <img src="../../assets/wallet.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <wv-cell title="我的下级" is-link to="/myinvite" v-if="agent.agentLevel==1">
        <img src="../../assets/peopleNum.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <wv-cell title="邀请下级" is-link :to="{path:'/selectAgentPrice',query:{agentId:agent.agentId}}"
               v-if="agent.agentLevel==1">
        <img src="../../assets/agent.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <wv-cell title="修改密码" is-link to="/updatepwd">
        <img src="../../assets/pwd.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <wv-cell title="退出" @click="isVisible=true">
        <img src="../../assets/logout.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
    </wv-panel>
    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isVisible=false">
        是否退出此次登录
        <p class="btn">
          <button @click="isVisible=false">取消</button>
          <button @click="agentLogout()">确定退出</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {agentInfo} from '../../utils/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'index',
    props: {},
    data() {
      return {
        agent: {},
        categoryList: [],
        isVisible: false
      };
    },
    methods: {
      getAgentInfo(params) {
        agentInfo(params).then(res => {
          console.log(res)
          if (res.code == 100) {
            this.agent = res.object.agent;
            this.categoryList = res.object.categoryList;
          } else {
            Toast.text(res.info)
          }
        })
      },
      agentLogout() {
        this.isVisible = false;
        window.localStorage.clear();
        this.$router.push({path: '/'})
      }
    },
    created() {
      let params = {queryAgentCategory: true};
      this.getAgentInfo(params);
    },
    components: {}
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .header {
    background: url("../../assets/mybanner.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    height: 110px;

    p {
      padding: 20px 10px 10px;

      img {
        vertical-align: middle;
        margin-right: 30px;
        border-radius: 50%;
      }
    }
  }

  .f5f5f5 {
    background-color: #eee;
    height: 60px;
  }

  .lists {
    display: flex;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 5px 14px rgba(47, 149, 240, 0.12);
    position: absolute;
    top: 88px;
    left: 50%;
    width: 90%;
    margin-left: -45%;

    li {
      flex: 1;
      position: relative;
      padding: 10px 0;
      font-size: 12px;
      color: #666;
    }

    :first-child p, :nth-child(2) p {
      height: 42px;
      padding-top: 10px;
    }

    :first-child:after, :nth-child(2):after {
      content: '';
      display: block;
      height: 47px;
      width: 1px;
      background-color: #eee;
      position: absolute;
      right: 0;
      top: 30%
    }
  }

  .items {
    display: flex;

    li {
      flex: 1;
      font-size: 11px;
      color: #666;
      padding: 10px 0;

      p {
        height: 31.24px;
      }
    }
  }

  .divider {
    height: 10px;
    background-color: #eee;
  }

  .mylist {
    padding-bottom: 60px;
    text-align: left;

    img {
      padding-left: 5px;
      vertical-align: middle;
      margin-right: 10px;
    }
  }

  .model .modelContent {
    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 2;
    padding: 40px 10px 20px;
    width: 80%;

    img {
      position: absolute;
      right: 10px;
      top: 10px
    }

    .btn {
      text-align: center;

      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
        margin-top: 25px;
      }

      button:last-child {
        background-color: #ccc;
        border: 1px solid #ccc4c0;
      }

      button:first-child {
        background-color: #3b9cf9;
        margin-right: 20px;

      }
    }

  }
</style>
